
<template>
    <div class="page-catalogue" v-loading="loading">
        <template v-if="folderData.length">
            <el-tree ref="folderTreeRef" :data="folderData" node-key="catalogueId" v-loading="loading"
                @node-click="checkClick"
                :expand-on-click-node="true" :auto-expand-parent="true"
                :default-expand-all="true"
                :render-after-expand="false" :icon="ArrowRight" class="folder-tree" 
                :indent="20" :props="defaultProps" empty-text="暂无课程目录">
                <template #default="{ node, data }">
                    <div :class="['catalogue-tag', fmtCatalogue(data.tag, data.catalogueType)]" >
                        <span class="title">
                            <span class="title-name">
                                <ellipsis :content="data.catalogueName"/>
                            </span>
                            <span class="show-subtitle" v-if="handleSubTitle(data)">字幕</span>
                        </span>
                        <!-- <span class="title">{{data.catalogueName}} <span class="time">{{fmtDuration(data)}}</span></span> -->
                        <div @click.stop>
                            <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" v-if="data.catalogueType === 1 && data.tag !== 'comment'" @click="handlePreview(data)">预览</el-button>
                        </div>
                    </div>
                </template>
            </el-tree>
        </template>
        <NoData v-else url="no-course.png" :showInfo="false">
            <div class="tips">暂无课程目录</div>
        </NoData>
    </div>
    <ContentPreviewDialog v-model="previesDialog" :form="catalogueData"/>
</template>

<script setup>
import NoData from '@/components/no-data.vue';
import ContentPreviewDialog from '@/components/content-preview-dialog.vue';
import { ref, onMounted, nextTick} from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { deepCopy, queryToJson, treeForEach } from '@/lib/tools';
import Confirm from '@/components/confirm/confirm.js'
import Ellipsis from '@/components/ellipsis.vue';
import { useRoute } from 'vue-router';
import { fmtTime } from '@/lib/biz-tools.js';

const route = useRoute();

const emit = defineEmits(['node-click', 'change-step']);

const defaultProps = {
    isLeaf: 'isLeaf',
    children: 'children',
    label: 'catalogueName',
    class: customNodeClass
}

// 目录内容
const catalogueData = ref({});

// 目录视频对应的字幕数组
const subTitleMap = ref({});

// 预览
const previesDialog = ref(false);

function handlePreview(data) {
    catalogueData.value.title = data?.catalogueName;
    catalogueData.value.materialVO = data?.courseWare?.materialVO;
    previesDialog.value = true;
}

// 预览
function checkClick(data) {
    if(data.catalogueType === 1 && data.tag !== 'comment') { // 目录类型{0.文件目录1课件}
        handlePreview(data);
    }
}

function customNodeClass(data, node) {
    if (data.pid == 0) {
        return 'catalogue-parent'
    }
    if(data.catalogueType === 1) {
        return 'catalogue-leaf'
    }
    return ''
}


const folderData = ref([]);

const folderTreeRef = ref(null);


function fmtCatalogue(tag, type) {
    if(type === 0) {
        return '';
    }
    let arr = tag && tag.split(',') || [];
    return arr.length && arr[0];
};


const loading = ref(false);


function getList() {
    loading.value = true;
    G_transmit('getFolderTree', {
        queries: {
            courseId: queryToJson().courseId || route.params.courseId,
            pathDeep: 5,
            showData: true,
            queryAll: true
        }
    }).then((res) => {
        folderData.value = res.data || [];
        nextTick(() => {
            getSubTitleList();
        })
    }).catch((_err) => {
        console.log(_err)
    }).finally(() => {
        loading.value = false;
    })
}

// 获取字幕列表 目录有视频获取字幕
function getSubTitleList () {
    let videoIds = [];
    if (folderData.value && folderData.value.length) {
        treeForEach(folderData.value, item => {
            if (item.catalogueType === 1 && item.courseWare && item.courseWare.contentId && item.tag === 'video') {
                videoIds.push(item.courseWare.contentId);
            }
        })
    }
    if (videoIds.length > 0) {
        G_transmit('subtitleSearch', {
            data: {
                materialIds: videoIds,
                subtitleInitType: 1
            }
        }).then(async (res) => {
            subTitleMap.value = {};
            (res.data || []).forEach(item => {
                subTitleMap.value[item.materialId] = item;
            })
        }).catch((_err) => {
            console.log(_err)
        }).finally(() => {
        })
    }
}

// 控制是否显示字幕
function handleSubTitle (data) {
    if (data.catalogueType === 1 && data.tag=== 'video' && data.courseWare.contentId && subTitleMap.value[data.courseWare.contentId]) {
        return true;
    } else {
        return false
    }
}

// 格式化时长
function fmtDuration (data) {
    return data.courseWare?.unitValue ? '时长 ' + fmtTime(data.courseWare.unitValue) : '';
}

onMounted(() => {
    getList();
})


</script>

<style lang="scss" scoped>

@mixin img-style(){
    content: '';
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 7px;
}

.page-catalogue {
    min-height: 456px;
    .tips {
        font-size: 14px; 
        color: var(--srt-color-gray);
        .add {
            cursor: pointer;
            color: var(--srt-main-active-text-color);
        }
    }
    .no-data {
        margin-top: 70px;
    }
}

.folder-tree {
    :deep(.el-tree-node) {
        font-size: 14px;
    }
    :deep(.catalogue-leaf) {
        .el-tree-node__expand-icon {
            display: none;
        }
    }
    :deep(.el-tree-node__expand-icon:not(.is-leaf)) {
        color: var(--main-text-color);
    }
    :deep(.el-tree-node__content) {
        height: 36px;
        color: var(--main-text-color);
        &:hover {
            background: #E7F1FF;
            border-radius: 4px;
        }
    }
    :deep(.el-tree-node__expand-icon) {
        margin-left: 4px;
    }
    :deep(.el-tree-node:focus) {
        &.catalogue-parent>.el-tree-node__content {
            background-color: #F7F9FA;
        }
        &>.el-tree-node__content {
            background-color: transparent;
        }
    }
}

:deep(.catalogue-parent) {
    padding-bottom: 10px;
    & > .el-tree-node__content {
        height: 36px;
        background: #F7F9FA;
        border-radius: 4px;
        font-weight: bold;
        color: var(--main-text-color);
        border: none;
    }
}

:deep(.active) {
    & > .el-tree-node__content {
        background: #E7F1FF;
    } 
}
.catalogue-tag {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    margin-left: 2px;
    .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
        overflow: hidden;
        .title-name {
            display: inline-block;
            max-width: calc(100% - 200px);
            // flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .show-subtitle {
            color: #47698C;
            margin-left: 4px;
            padding: 0 4px;
            background: #EFF0F2;
            border-radius: 4px;
            line-height: 20px;
        }
    }
    &.doc, &.docx {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/doc.png') no-repeat;
            background-size: contain;
        }
    }
    &.ppt, &.pptx {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/ppt.png') no-repeat;
            background-size: contain;
        }
    }
    &.xls, &.xlsx{
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/excel.png') no-repeat;
            background-size: contain;
        }
    }
    &.img {
        &::before {
            content: '';
            @include img-style();
            background: url('~@/assets/img/resource-type/img.png') no-repeat;
            background-size: contain;
        }
    }
    &.files {
        &::before {
            content: '';
            @include img-style();
            background: url('~@/assets/img/resource-type/files.png') no-repeat;
            background-size: contain;
        }
    }
    &.pdf {
        &::before {
            content: '';
            @include img-style();
            background: url('~@/assets/img/resource-type/pdf.png') no-repeat;
            background-size: contain;
        }
    }
    &.audio {
        &::before {
            content: '';
            @include img-style();
            background: url('~@/assets/img/resource-type/audio.png') no-repeat;
            background-size: contain;
        }
    }
    &.video {
        &::before {
            content: '';
            @include img-style();
            background: url('~@/assets/img/resource-type/video.png') no-repeat;
            background-size: contain;
        }
    }
    &.rest, &.unknown {
        &::before {
            content: '';
            @include img-style();
            background: url('~@/assets/img/resource-type/rest.png') no-repeat;
            background-size: contain;
        }
    }
    &.comment {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/comment.png') no-repeat;
            background-size: contain;
        }
    }
    &.catalogue {
        &::before {
            display: none;
        }
    }
}

.edit-submit {
    padding: 30px 0px 86px;
    text-align: center;
    .btn {
        width: 76px;
        margin-right: 8px;
    }
}
.time {
    font-size: 14px;
    color: var(--srt-color-gray);
    margin-left: 14px;
}

</style>